<template>
	<view class="content_page">
		<div class="header">
			<view class="title">我的</view>
			<div class="info_person" :style="{ fontSize: globalFont == 'small_font' ? '32rpx' :globalFont == 'small-medium'? '40rpx':'50rpx' }">
				<div style="display: flex; align-items: center">
					<div class="nickname">{{ personInfo.nickname || "微信用户" }}</div>
				</div>
				<div class="setting_content" @click="settingPerson" :style="{padding: globalFont == 'small_font' ? '0 20px' :'4px 25px' }">账户设置</div>
			</div>
		</div>
		<div class="tab_content">
			<div class="tab_list_o" :class="['tab_list_o', globalFont]"
				:style="{ padding: globalFont !== 'small_font' ? '38rpx 10rpx' : '38rpx 60rpx' }">
				<div class="item" v-for="(i, k) in tabList" :key="k" @click="toTabPage(i.title)">
					<image :src="i.src"></image>
					<div :style="{ fontSize: globalFont == 'small_font' ? '26rpx' :globalFont == 'small-medium'? '32rpx':'36rpx' }">{{ i.title }}</div>
				</div>
			</div>
			<div class="tab_list_t" v-if="showPosiion" :class="['tab_list_t', globalFont]">
				<div class="location_group">
					<div class="location_info" :class="['location_info', globalFont]">
						<image src="/static/myInfo/position.png"></image>
						<div class="title">我的位置</div>
					</div>
					<span :style="{fontSize: globalFont === 'small_font' ? '28rpx' : '32rpx'}">{{ weatherRes?.city }} {{ weatherRes?.district }}</span>
				</div>
				<div @click="resetreauthorize" :class="['reauthorize', globalFont]" style="margin-left: auto;">重新授权
				</div>
			</div>
			<div class="tab_list_t" @click="toTabPage('保养记录')" :class="['tab_list_t', globalFont]">
				<div class="flex_center">
					<image src="/static/myInfo/my_icon_maintenance@2x.png"></image>
					<div class="title">保养记录</div>
				</div>
				<image src="/static/myInfo/icon_arrow.png" style="width: 24rpx; height: 24rpx"></image>
			</div>
			<div class="tab_list_c" :class="['tab_list_c', globalFont]">
				<div class="item" @click="toTabPage('帮助中心')">
					<div class="flex_center">
						<image src="/static/myInfo/my_icon_help@2x.png"></image>
						<div class="title">帮助中心</div>
					</div>
					<image src="/static/myInfo/icon_arrow.png" style="width: 24rpx; height: 24rpx"></image>
				</div>
				<div class="item" style="margin-bottom: 0" @click="toTabPage('意见反馈')">
					<div class="flex_center">
						<image src="/static/myInfo/my_icon_opinion@2x.png"></image>
						<div class="title">意见反馈</div>
					</div>
					<image src="/static/myInfo/icon_arrow.png" style="width: 24rpx; height: 24rpx"></image>
				</div>
			</div>
			<div class="tab_list_t" @click="showModalFn" :class="['tab_list_t', globalFont]" style="margin-top: 10px;">
				<div class="flex_center">
					<image src="/static/myInfo/fontSize.png"></image>
					<div class="title">字体设置</div>
				</div>
				<image src="/static/myInfo/icon_arrow.png" style="width: 24rpx; height: 24rpx"></image>
			</div>
		</div>
		<!--  设置字体弹框 -->
		<div>
			<up-popup :show="showModal" z-index="999999999" mode="bottom" :round="16">
				<view class="title addtitle">
					<div style="width: 40rpx"></div>
					<text>编辑字体</text>
					<image src="/static/home/close.png" @click="showModal = false"></image>
				</view>
				<view class="part borderLine mt114">
					<up-picker :show="showModal" :columns="columnsTwo" :defaultIndex="Modalpressure"
						@change="changePickerTwo"></up-picker>
					<view class="modalBtn">
						<view class="btn" @click="sureSubmit">确认</view>
					</view>
				</view>
			</up-popup>
		</div>

	</view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, getCurrentInstance } from "vue";
const statusBarHeight = ref<any>("");
import { getWeatherInfo } from "../../api/index/index.ts";
import type { personInfo, resInfo } from "@/api/myInfo/typs.ts";
import { personInfoFn } from "@/api/myInfo/myInfo.ts";
const tabList = ref<{ id: number; title: string; src: string }[]>([
	{
		id: 1,
		title: "设备管理",
		src: "/static/myInfo/my_icon_Administration@2x.png",
	},
	{
		id: 2,
		title: "工作日志",
		src: "/static/myInfo/my_icon_journal@2x.png",
	},
	{
		id: 3,
		title: "操作记录",
		src: "/static/myInfo/my_icon_record@2x.png",
	},
	{
		id: 4,
		title: "告警信息",
		src: "/static/myInfo/warning@2x.png",
	},
]);
// 跳转页面
const toTabPage = (k: string) => {
	switch (k) {
		case "设备管理":
			uni.navigateTo({
				url: "/pages/toTab/equipment/equipment",
			});
			break;
		case "工作日志":
			uni.navigateTo({
				url: "/pages/toTab/worklog",
			});
			break;
		case "操作记录":
			uni.navigateTo({
				url: "/pages/toTab/operationrecord",
			});
			break;
		case "告警信息":
			uni.navigateTo({
				url: "/pages/toTab/warningInfo",
			});
			break;
		case "保养记录":
			uni.navigateTo({
				url: "/pages/toTab/maintenance",
			});
			break;
		case "帮助中心":
			uni.navigateTo({
				url: "/pages/toTab/helpCenter/helpcenter",
			});
			break;
		case "意见反馈":
			uni.navigateTo({
				url: "/pages/toTab/Feedback",
			});
			break;
	}
};
const Modalpressure = ref()
const columnsTwo = ref([
	['小号', '中号', '大号']
]);
// 编辑弹框
const bb = ref('小号')
const changePickerTwo = (e: any) => {
	bb.value = e.value[0]
}
const showModal = ref<boolean>(false);
const showModalFn = () => {
	showModal.value = true;
	if (globalFont.value == "small_font") {
		Modalpressure.value = [0]
	} else if (globalFont.value == "small-medium") { 
		Modalpressure.value = [1]
	} else {
		Modalpressure.value = [2]
	}
	
};
const instance = getCurrentInstance();
const appStorage = instance?.appContext.config.globalProperties.appStorage;
const sureSubmit = () => {
  if (bb.value == '小号') {
    userInfo_key.value.smallFont = 'small_font';  // 设置为小号
  }
  if (bb.value == '中号') {
    userInfo_key.value.smallFont = 'small-medium';  // 设置为中号
  }
  if (bb.value == '大号') {
    userInfo_key.value.smallFont = 'small-large';  // 设置为大号
  }
  appStorage.setObj("userInfo_key", userInfo_key.value);  // 更新本地存储
	showModal.value = false;
	uni.showToast({
		title:'设置成功',
	})
	setTimeout(() => {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }, 700); 
}
const settingPerson = () => {
	uni.navigateTo({
		url: `/pages/settingInfo/index`,
	});
};
// 个人信息
const personInfo = ref<personInfo>({
	nickname: "",
	avatar: "",
	phoneNumber: "",
});
const getData = () => {
	personInfoFn()
		.then((res: resInfo) => {
			if (res.resultStatus) {
				personInfo.value = res.resultData;
			}
		})
		.catch((err: any) => {
			uni.showToast({
				title: "服务器异常",
				icon: "none",
			});
		});
};

// 重新授权接口
const getPositionInfo = (str: any) => {
	getWeatherInfo({
		lat: str.latitude,
		lng: str.longitude,
	})
		.then((res: any) => {
			if (res.resultStatus) {
				weatherRes.value = res.resultData;
			}
		})
		.catch((err: any) => {
			console.log(err);
		});
};
const requestLocationPermission = () => {
	uni.authorize({
		scope: "scope.userLocation",
		success: function () {
			getLocationInfo();
		},
		fail: function () {
			uni.showToast({
				title: "授权失败，请在设置中开启定位权限",
				icon: "none",
			});
		},
	});
};
const getLocationInfo = () => {
	uni.getLocation({
		type: "wgs84",
		success: function (res) {
			appStorage.setObj("weatherInfo", res);
			uni.showToast({
				title: "授权位置成功！",
				icon: "none",
			});
			getPositionInfo(res);
		},
		fail: (err) => {
			uni.showToast({
				title: "授权位置失败，请勿频繁点击！",
				icon: "none",
			});
		},
	});
};
const resetreauthorize = () => {
	uni.showModal({
		title: "重新授权",
		content: "是否重新授权并获取您的定位信息？",
		success: function (res) {
			if (res.confirm) {
				requestLocationPermission();
			} else if (res.cancel) {

			}
		},
	});
};
const hasLogin = ref();
const showPosiion = ref();
const weatherRes = ref();
const globalFont = ref()
const userInfo_key = ref();
onShow(() => {
	getData();
	const getNavHeight =
		getCurrentInstance()?.appContext.config.globalProperties.getnavHeight();
	statusBarHeight.value = getNavHeight;
	userInfo_key.value = appStorage.getObj("userInfo_key");
	globalFont.value = userInfo_key.value.smallFont
	const weatherInfo = appStorage.getObj("weatherInfo");
	// 用户没有授权，不展示位置信息
	if (Object.keys(weatherInfo).length === 0) {
		showPosiion.value = false;
	} else {
		showPosiion.value = true;
		getPositionInfo(weatherInfo);
	}
});
</script>

<style lang="scss" scoped>
:root {
	/* 默认字号 */
	--font-size-small: 26rpx;
	/* 中号字号 */
	--font-size-medium: 32rpx;
	/* 大号字号 */
	--font-size-large: 40rpx;
}

.small_font {
	font-size: var(--font-size-small);
}

.small-medium {
	font-size: var(--font-size-medium);
}

.small-large {
	font-size: var(--font-size-large);
}

.content_page {
	height: 100vh;
	overflow: hidden;
	background: #f5f6f7;

	.header {
		background-image: url("/static/myInfo/my_BJ.png");
		background-size: cover;
		height: 250rpx;
		padding: 100rpx 32rpx 0;
		background-position: center center;

		.title {
			font-size: 19px;
			font-weight: bold;
			color: #333333;
			line-height: 52rpx;
			margin-bottom: 50rpx;
		}

		.info_person {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.nickname {
				font-weight: bold;
				text-align: left;
				color: #1f1f1f;
				margin-left: 30rpx;
			}

			.setting_content {

				padding: 0 20px;
				line-height: 64rpx;
				text-align: center;
				background: rgb(209, 227, 216);
				border-radius: 18px;			}
		}
	}

	.tab_content {
		padding: 0 36rpx;

		.tab_list_o {
			background-color: #fff;
			padding: 38rpx 60rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 16rpx;
				}

				.title {
					color: #1f1f1f;
				}
			}
		}

		.tab_list_t {
			background-color: #fff;
			border-radius: 32rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			image {
				width: 58rpx;
				height: 58rpx;
			}
			.title {
				color: #1f1f1f;
				margin-left: 24rpx;
			}
			.location_group {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 12rpx;
			}
			.reauthorize {
				margin-left: auto;
			}
		}

		.location_info {
			display: flex;
			align-items: center;
		}

		.location_info image {
			width: 40rpx;
			height: 40rpx;
		}

		.location_info .title {
			color: #333;
			margin-left: 12rpx;
		}

		.weather_info {
			color: #666;
		}

		.reauthorize {
			color: #00a67e;
			cursor: pointer;
			margin-left: 20px;
			text-decoration: underline;
		}

		.tab_list_c {
			background-color: #fff;
			border-radius: 32rpx;
			padding: 32rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 50rpx;
			}

			image {
				width: 58rpx;
				height: 58rpx;
			}

			.title {
				// font-size: 30rpx;
				color: #1f1f1f;
				margin-left: 24rpx;
			}
		}
	}
}
</style>
